<template>
    <div>
        <el-dialog title="警情日报" v-model="showDia" width="60%" @close="onClose">
            <div class="block-box">
                <div class="red block"></div> 设备报警数：已处理/总数
                <div class="yellow block"></div> 设备故障数：已处理/总数
                <div class="blue block"></div> 设备监管数：已处理/总数

            </div>
            <el-calendar ref="calendar">
                <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size="default" @click="selectDate('prev-month')">上个月</el-button>
                        <el-button size="default" @click="selectDate('today')">本月</el-button>
                        <el-button size="default" @click="selectDate('next-month')">下个月</el-button>
                    </el-button-group>
                </template>
                <template #dateCell="{ data }">
                    <div class="dateShow">
                        <div>{{ data.day }}</div>
                        <template v-for="(item, index) in calendarData" :key="item.date + index">
                            <div v-if="data.day == item.date" class="dateInfoItem" @click="showDetail(item)">

                                <div class="dateInfoShowItem red">
                                    {{ item.exec_bj }} / {{ item.method_bj }}
                                    <!-- 设备报警数：（{{ item.method_bj }}）已处理：（{{ item.exec_bj }}） -->
                                </div>
                                <div class="dateInfoShowItem yellow">
                                    {{ item.exec_gz }} / {{ item.method_gz }}
                                    <!-- 设备故障数：（{{ item.method_gz }}）已处理：（{{ item.exec_gz }}） -->
                                </div>
                                <div class="dateInfoShowItem blue">
                                    {{ item.exec_yj }} / {{ item.method_yj }}
                                    <!-- 设备监管数：（{{ item.method_yj }}）已处理：（{{ item.exec_yj }}） -->
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </el-calendar>
        </el-dialog>

        <el-dialog title="警情日报详情" append-to-body v-model="showDiaDeatil" width="1200px">
            <el-form :model="search" inline>
                <el-form-item label="名称">
                    <el-input v-model="search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="设备编号">
                    <el-input v-model="search.device_no" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList" size="default">搜索</el-button>
                    <el-button type="warning" @click="reset" size="default">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="deatil">
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="事件描述" prop="device_remark"> </el-table-column>
                <el-table-column label="设备类型" prop="device_name"></el-table-column>
                <el-table-column label="设备编号" prop="device_no"></el-table-column>
                <el-table-column label="设备信息">
                    <template #default="{ row }">
                        <span v-if="row.measure">{{ row.measure }}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" prop="create_time"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { setDeviceData } from '@/util/deviceData'
export default {
    data() {
        return {
            calendarData: [],
            yearMonth: '',
            deviceList: [],
            showDia: false,
            showDiaDeatil: false,
            deatil: [],
            item: {},
            search: {}
        }
    },
    created() { },
    methods: {
        selectDate(value) {
            this.$refs.calendar.selectDate(value)
            let temp = this.$refs.calendar.curMonthDatePrefix.split('-')
            this.yearMonth = temp
            this.getCalendarData()
        },
        getCalendarData() {
            this.$api
                .post('/unit/DeviceWarning/total', {
                    total_type: ['method_field', 'date_count'],
                    year: this.yearMonth[0],
                    month: this.yearMonth[1],
                    rows: 100
                })
                .then((res) => {
                    this.calendarData = res.data.list
                })
        },

        getList() {
            this.$api.post('/unit/DeviceWarning/alarmDetails', { date: this.item.date, ...this.search }).then(async (res) => {
                this.deviceList = await setDeviceData(res.data)
                this.deatil = res.data
            })
        },
        reset() {
            this.search = {}
            this.getList()
        },
        showDetail(item) {
            this.showDiaDeatil = true
            this.item = item
            this.getList()
        },
        open() {
            this.showDia = true
            let date = new Date()
            this.yearMonth = [date.getFullYear(), Number(date.getMonth()) + 1]
            this.getCalendarData()
        },
        onClose() {
            this.showDia = false
        }
    }
}
</script>

<style scoped>
.dateShow {
    font-size: 12px;
}

.block {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 5px 0 20px;
}

.block-box {
    display: flex;
    align-items: center;
}

.dateInfoShowItem {
    margin-top: 4px;
    padding: 2px 0;
    box-sizing: border-box;
    ;
    color: #fff;
}

.red {
    background-color: #f56c6c;
}

.yellow {
    background-color: #e6a23c;
}

.blue {
    background-color: #409eff;
}

.el-calendar-table .el-calendar-day {
    height: 10vh;
}
</style>
